  <template>
      <transition
          name="fade"
          @before-enter="beforeEnter"
          @enter="enter"
          @leave="leave">
        <div class="carousel-container" :style="`background-image: url(${images[indexNum]})`">
            <slot></slot>
        </div>
      </transition>
  </template>

  <script>

  export default {
    name:"Backed",
    data() {
      return {
        images: [
          require('@/assets/img/t03f2a180bcd2f3f80c.jpg'),
          require('@/assets/img/t04c2c689bfb77085df.jpg'),
          require('@/assets/img/t049d0c93fc780d9a93.jpg')
        ],
        indexNum: 0
      };
    },
    methods: {
      changeImage() {
        this.tid = setInterval(() => {
          console.log(111)
          if (this.indexNum >= 2) {
            this.indexNum = 0;
          } else {
            this.indexNum += 1;
          }
        }, 5000);
      },
      beforeEnter(el) {
        el.style.opacity = 0.5;
      },
      enter(el, done) {
        el.offsetHeight;
        el.style.transition = 'opacity 3s';
        el.style.opacity = 1;
        done();
      },
      leave(el, done) {
        el.style.transition = 'opacity 3s';
        el.style.opacity = 0.5;
        done();
      }
    },
    mounted() {
      this.changeImage();
    },
    beforeRouteLeave(to, from, next) {
      console.log(to.path)
      clearInterval(this.tid);
      next();
    }
  };
  </script>

  <style scoped>
  .carousel-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-size: cover; /* 背景图填充整个容器 */
    background-position: center; /* 背景图居中显示 */
    background-repeat: no-repeat; /* 背景图不重复 */
    z-index: 1;
  }
  .carousel-container div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  </style>
